<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <box ref="boxref"></box>
    </div>
</body>
<script>
    /*
        1. 在 setup 中使用 ref
        在 setup 中通过 ref 来创建一个变量 const boxref = ref()
        第二步在 setup 中将 boxref 返回出去 return { boxref }
        第三步在标签中使用 boxref,注意不需要加 v-bind :  <box ref="boxref"></box>
        第四步解构出 nextTick 然后使用 boxref获取组件

        2. context.expose 方法，是让当前组件的内容不暴露出去
    
    */

    // 在组合式 api 中如果需要在 setup 中使用 ref 可以这样做
    const { ref, nextTick } = Vue

    const app = Vue.createApp({
        setup (props, context) {

            const boxref = ref()

            // console.log(this.$refs);

            // setTimeout(() => {
            //     console.log(boxref.value.title);
            // }, 3000)

            nextTick(() => {
                console.log('11111', boxref);
                // boxref.value.title = '123'
            })

            return {
                boxref
            }
        },
        // mounted () {
        //     console.log(this.$refs)
        // },
    })

    app.component('box', {
        template: `<div>
            拼搏到无能为力 -- {{ title }}   
        </div>`,
        setup (props, context) {

            // 让组件实例处于关闭状态
            // 不向其他组件暴露任何东西
            context.expose()

            return {
                title: ref('box 组件')
            }
        }


    })
    app.mount('#app')
</script>

</html>